<template>
	<div>
		<el-card>
			<div slot="header">
				<span>添加账号</span>
			</div>

			<div class="addphone">
				<el-form
					:model="FormData"
					:rules="rules"
					label-width="100px"
					ref="FormData"
                    status-icon
				>
					<!-- 账号 -->
					<el-form-item prop="account" label="账号">
						<el-input
							placeholder="请输入账号"
							v-model="FormData.account"
							clearable
						>
						</el-input>
					</el-form-item>
					<!-- 密码 -->
					<el-form-item prop="password" label="密码">
						<el-input
							placeholder="请输入密码"
							v-model="FormData.password"
                            show-password
						>
						</el-input>
					</el-form-item>

					<el-form-item prop="userGroup" label="用户组">
						<el-select
							v-model="FormData.userGroup"
							placeholder="请选择用户组"
							clearable
						>
							<el-option
								label="超级管理员"
								value="超级管理员"
							></el-option>
							<el-option
								label="普通管理员"
								value="普通管理员"
							></el-option>
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button class="fff gree" @click="handleAdd">添加</el-button
						>
						<el-button @click="resetForm">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
	</div>
</template>

<script>
	import { checkPassword, addCheckAccount } from "@/utils/valid";
import { api_users_add } from '@/apis/user';
	
	export default {
		data() {
			return {
				FormData: {
					account: "",
					password: "",
					userGroup: "",
				},
				rules: {
					// 自定义验证
					account: { validator: addCheckAccount, trigger: "blur" },
					password: { validator: checkPassword, trigger: "blur" },
					userGroup:{required: true, message: '请选择用户组', trigger: 'blur' }
				},
			};
		},
		methods:{
 handleAdd() {
      this.$refs.FormData.validate(async (valid) => {
        if (valid) {
          const res = await api_users_add(this.FormData);
          if (res.data.code === 0) {
            this.$router.push("/account");
          }
        }
      });
    },
	resetForm(){
		this.$refs.FormData.resetFields();
	}
		}
	};
</script>

<style lang="scss" scoped>
.el-input {
        width: 300px;
        ::v-deep .el-input__inner {
          width: 300px;
        }
      }
      .el-select {
        width: 300px;
      }
</style>
